<template>
	<view class="container">
		<com-head textTit="发票管家" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="serchWrap">
			<u-icon name="search" color="#999999" size="26"></u-icon>
			<input @input="serchList()" v-model.trim="out_trade_no"  type="text"  placeholder="搜索订单编号"  placeholder-style="color:#999"></input>
			<view class="history" @click="utlis.goUrl(`/pages/mine/invoiceHistoryList?type=2`)">开票记录</view>
		</view>
		<template v-if="orderList.length">
			<view class="invoiceList" v-if="orderList.length">
				<!-- <view class="tag"></view> -->
				<view class="list" v-for="(ele,index) in orderList" :key="ele.id">
					<view class="listTop">
						<view class="left">
							<text class="iconfont " @click="chiose(ele,index)"
							:class="ele.check ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "
							></text>
							<text>{{ele.store.title}}</text>
						</view>
						<view class="right">
							￥{{ele.orders_payable}}
						</view>
					</view>
					<!-- 项目 -->
					<template v-if="ele.project.length">
						<view class="contents" v-for="(list,index) in ele.project" :key="index">
							<view class="item" >
								消费项目：
								<text >{{list.project_name}}</text>
							</view>
							<view class="item">
								项目时长：<text>{{list.duration}}分钟</text>
							</view>
							<view class="item">
								订单编号：<text>{{ele.out_trade_no}}</text>
							</view>
							<view class="item">
								消费时间：<text>{{ele.pay_time}}</text>
							</view>
						</view>
					</template>
					<!-- 商品 -->
					<template v-else>
						<view class="contents" v-for="(list,index) in ele.goods" :key="index">
							<view class="item" >
								消费商品：
								<text >{{list.goods_name}}</text>
							</view>
							<view class="item">
								订单编号：<text>{{ele.out_trade_no}}</text>
							</view>
							<view class="item">
								消费时间：<text>{{ele.pay_time}}</text>
							</view>
						</view>
					</template>
					
				</view>
				<u-loadmore margin-top="60" margin-bottom="50" :status="status" />
			</view>
			<view class="fixed">
				<view class="tit">仅能提供在同一门店消费的合并开票服务，在不同门店消费，请分开申请。<text>注：消费开票有效期为30天</text></view>
				<view class="applyWrap">
					<view class="chioseResult">已选 ：<text>{{number}}</text></view>
					<text class="totalPrice">总金额 : <text>¥{{price}}</text></text>
					<view class="applyBtn" @click="apply">申请开票</view>
				</view>
			</view>
		</template>
		<view class="noDate" v-else>
			<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
			<view>暂无更多待开票订单~</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				status:'loading',
				total:0,
				page:1,
				orderList:[],
				number:0,
				price:"0.00",
				orders:{},
				out_trade_no:'',
				scrollTop: 0
			}
		},
		async onShow() {
			this.orderList=[]
			this.getOrderList()
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.total > this.orderList.length) {
				this.page++;
				this.getOrderList();
			}
		},
		methods: {
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.orderList=[]
					this.getOrderList()
				}, 800);
			},
			apply(){
				if(this.orders.id){
					let ele = this.orders
					this.utlis.goUrl(`/pages/mine/applyInvoice?ids=${ele.id}&price=${ele.orders_payable}&company_id=${ele.store.company_id}`)
				}else{
					this.utlis.Toast("请选择要开发票的订单")
				}
			},
			// 获取已完成订单
			async getOrderList(){
				let {data,code} = await this.$u.api.getInvoiceOrders({out_trade_no:this.out_trade_no});
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					let datas  =[]
					data.data.forEach((ele)=>{
						ele.check = false
					})
					this.orderList = [...this.orderList, ...data.data];
					this.total = data.total;
					if (this.total <= this.orderList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			chiose(ele,index){
				if(ele.pay_type == 2 || ele.pay_type == 3 || ele.pay_type == 4 || ele.pay_type == 5){
					this.orderList.forEach((ele1,index1)=>{
						if(index != index1){
							ele1.check = false
						}
					})
					ele.check = !ele.check
					if(ele.check){
						this.number = 1
						this.price = ele.orders_payable
						this.orders = ele
					}else{
						this.number = 0
						this.price = "0.00"
						this.orders = {}
					}
					this.$forceUpdate()
				}else{
					this.utlis.Toast("已开充值发票，此订单不可开票")
					return
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.fixed{
		padding-top: 20rpx;
		position: fixed;
		z-index: 999;
		bottom: 0;
		background: #F6F7FA;
		width: 100%;
		.tit{
			padding: 0 32rpx;
			box-sizing: border-box;
			text-align: center;
			font-size: 20rpx;
			color: #999999;
			line-height: 37rpx;
			margin-bottom: 20rpx;
			text{
				color: #007664;
			}
		}
		.applyWrap{
			width: 750rpx;
			height: 207rpx;
			background: #ffffff;
			box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
			padding: 35rpx 32rpx 102rpx 54rpx;
			display: flex;
			justify-content:space-between;
			font-size: 30rpx;
			color: #666666;
			align-items: center;
			.chioseResult{
				text{
					color: #333333;
					margin-left: 10rpx;
				}
			}
			.totalPrice{
				text{
					color: #007664;
					margin-left: 16rpx;
				}
			}
			.applyBtn{
				width: 236rpx;
				line-height: 70rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
				border-radius: 6rpx;
			}
		}
	}
	.invoiceList{
		padding: 0rpx 32rpx 300rpx 32rpx;
		.tag{
			color: #007664;
			margin-bottom: 32rpx;
		}
		.list{
			padding: 32rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.listTop{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 28rpx;
				.left{
					color: #333333;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					.icon-weixuanzhong{
						font-size: 42rpx;
						color: #999999;
						margin-right: 30rpx;
					}
					.icon-a-xingzhuang1{
						font-size: 42rpx;
						color:#d1b87d;
						margin-right: 30rpx;
					}
				}
				.right{
					font-size: 30rpx;
					color: #007664;
					line-height: 42px;
				}
				
			}
			.contents{
				padding-left: calc(90rpx - 32rpx);
				margin-bottom: 20rpx;
				.item{
					color: #999999;
					font-size: 24rpx;
					margin-bottom: 20rpx;
					text{
						color: #333333;
						margin-left: 18rpx;
					}
				}
				.item:last-child{
					margin-bottom: 0;
				}
			}
			.contents:last-child{
				margin-bottom: 0;
			}
		}
	}
	.serchWrap{
		padding: 40rpx 0 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		margin-bottom: 37rpx;
		u-icon{
			position: absolute;
			left: 54rpx;
		}
		input{
			width: 511rpx;
			height: 70rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 0 26rpx 0 76rpx;
			box-sizing: border-box;
			color: #333333;
		}
		.history{
			width: 153rpx;
			line-height: 70rpx;
			background: #ffffff;
			border-radius: 20rpx;
			color: #C5A95C;
			font-size: 24rpx;
			text-align: center;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
